<script setup>
import {onMounted, ref} from 'vue'
import { ElMessage } from 'element-plus'
import axios from "axios";

// 查询表单数据
const queryForm = ref({
  userAccount: '',
  bodyType: '',
  beginWeight:'',
  endWeight:'',
})

// 表格数据
const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(800)
// 重置查询条件
const handleReset = () => {
  queryForm.value = {
    userAccount: '',
    bodyType: '',
    beginWeight:0.0,
    endWeight:0.0,
  }
}
//刷新
const index=()=>{
  try {
    //实现查询逻辑
    axios.get(`/health/getHealth/2/${currentPage.value}/${pageSize.value}`).then((response) => {
      console.log(response.data);
      total.value = response.data.total;
      tableData.value = response.data.data;
    })
    // ElMessage.success('查询成功')
  } catch (error) {
    ElMessage.error('查询失败')
  }
}
// 查询数据
const handleQuery =  () => {
  try {
    //实现查询逻辑
    axios.post(`/health/getHealthData/${currentPage.value}/${pageSize.value}`,queryForm.value).then(response => {
      total.value = response.data.total;
      tableData.value = response.data.data;
    })
    ElMessage.success('查询成功')
  } catch (error) {
    ElMessage.error('查询失败')
  }
}
// 查看或编辑
const handleEdit = (row) => {
  ElMessage.success('查看/编辑记录：' + row.account)
}
// 导出数据
const exportData = () => {
  // axios.get(`/health//download/1/${currentPage.value}/${pageSize.value}`).then((response) => {
  location.href = `http://localhost:8080/health/download/1/${currentPage.value}/${pageSize.value}`;
  ElMessage.success('导出成功');
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  index()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  index()
}

onMounted(()=>{
  index()
})
</script>

<template>
  <div class="weight">
    <!-- 查询区域 -->
    <div class="query-section">
      <div class="title">查询条件</div>
      <el-form :model="queryForm" label-width="80px" class="query-form">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="用户账号：">
              <el-input v-model="queryForm.userAccount" placeholder="请输入用户账号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体重类型：">
              <el-select v-model="queryForm.bodyType" placeholder="请选择" clearable style="width: 100%">
                <el-option label="标准" value="标准型" />
                <el-option label="偏瘦" value="偏瘦型" />
                <el-option label="偏胖" value="偏胖型" />
                <el-option label="肌肉" value="肌肉型" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="体重范围：">
              <div class="weight-range">
                <el-input v-model="queryForm.beginWeight" placeholder="最小值" style="width: 100px" />
                <span class="separator">至</span>
                <el-input v-model="queryForm.endWeight" placeholder="最大值" style="width: 100px" />
                <span class="unit">公斤</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="btn-group">
            <el-button @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleQuery">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 数据列表区域 -->
    <div class="data-section">
      <div class="title-bar">
        <div class="title">数据列表</div>
        <el-button type="primary" @click="exportData">导出数据</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="userAccount" label="用户账号" width="120" />
        <el-table-column prop="userNickname" label="用户昵称" width="120" />
        <el-table-column prop="weight" label="体重(公斤)" width="100" align="right" />
        <el-table-column prop="fatRate" label="脂肪率" width="100" align="right">
          <template #default="{ row }">
            {{ row.fatRate }}%
          </template>
        </el-table-column>
        <el-table-column prop="bmi" label="BMI" width="100" align="right" />
        <el-table-column prop="bodyType" label="身体类型" width="100" />
        <el-table-column prop="weightLastMeasurementTime" label="最近测量时间" width="160" >
        <!--          <template #default="{ row }">-->
        <!--            {{ formatChineseDateTime(row.duration) }}-->
        <!--          </template>-->
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row)">查看更多</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-section">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[1,3,5,10, 20, 30, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style scoped>
.weight {
  padding: 20px;
  background: #fff;
}

.title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 20px;
}

.query-section {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.query-form {
  margin-top: 20px;
}

.weight-range {
  display: flex;
  align-items: center;
  gap: 10px;
}

.separator {
  color: #666;
}

.unit {
  color: #666;
  margin-left: 5px;
}

.btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.data-section {
  margin-bottom: 20px;
}

.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.pagination-section {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>